<template>
  <div class="login-container">

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-width="80px">
      <div style="text-align: center;color:white;font-size:30px">
        <h3>
          AITesting测试平台
        </h3>
      </div>
      <el-form-item label="账号：" required prop="username">
        <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username" style="width:350px" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码：" required prop="password">
        <el-input prefix-icon="el-icon-lock" :type="passwordType" v-model="loginForm.password" style="width:350px" placeholder="请输入密码">
          <i v-if="passwordType == 'password'" @click="switchPasswordType()" slot="suffix" class="el-input__icon el-icon-sunrise"></i>
          <i v-else slot="suffix" @click="switchPasswordType()" class="el-input__icon el-icon-view"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width:350px" type="primary" @click="login(loginForm.username,loginForm.password)">登 录</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>



<script>
import { getToken, setToken, removeToken } from '@/utils/auth'
import request from "@/utils/request";
import { login } from '@/api/login'
export default {
  name: 'login',
  data () {
    return {
      passwordType: 'password',
      loginForm: {
        username: 'admin',
        password: '123456',
      },

      loginRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 10 个字符', trigger: 'blur' }]

      }
    }
  },

  methods: {
    login (username, password) {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          login(this.loginForm).then(resp => {
            console.log(resp)
            if (resp.code == '200') {
              setToken(resp.data.token)
              this.$router.push({
                name: '首页'
              })
            } else {
              this.$message.error(resp.message);
            }
          }).catch(error => {
            console.log(error)
          });

          //   request({
          //     url: "/aitest/account/login?username=" + username + "&password=" + password,
          //     method: "get",
          //     params: ""
          //   }).then(resp => {
          //     if (resp.status == 'success') {
          //       setToken(username)
          //       this.$router.push({
          //         name: '常用指令'
          //       })
          //     } else {
          //       this.$message.error(resp.message);
          //     }
          //   }).catch(error => {
          //     console.log(error)

          //   });

          //   if (username == 'aitesting' && password == '123456') {
          //     setToken(username)
          //     this.$router.push({
          //       name: '常用指令'
          //     })
          //   } else {
          //     this.$message.error('账号密码错误，请重新输入！');
          //   }
        }
      })


    },

    switchPasswordType () {
      if (this.passwordType == 'password') {
        this.passwordType = 'pass'
      } else {
        this.passwordType = 'password'
      }
    }
  }
}
</script>

<style >
.login-container {
  min-height: 100%;
  width: 100%;
  height: 100%;
  background-color: #212b75;
  /* overflow: hidden; */
}

.login-container .login-form {
  position: relative;
  width: 520px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
  /* overflow: hidden; */
}

.login-container .el-form-item__label {
  color: #ffffff;
}
</style>

